<template>
  <div>
    <vueEprint :optionsVal="config" :moduleList="list" :printData="data" @saveDate="saveModule"/>
  </div>
</template>

<script setup>
import vueEprint from "./components/vue-eprint";
import { ref } from "vue";
// 自定义组件配置
const config = ref([
    {
      tid: "providerModule1.config",
      title: "参数provider示例",
      type: "text",
      options: {
        testData: "单据表头",
        height: 30,
        fontSize: 16,
      },
    },
    {
      tid: "providerModule.longText",
      title: "姓名",
      type: "longText",
      options: {
        field: "test.names",
        width: 200,
        testData: "长文本分页/不分页测试",
      },
    },
    {
      tid: "providerModule.myTable",
      title: "自定义表格",
      type: "table",
      options: {
        field: "myTable",
        fields: [
          { text: "姓名", field: "NAME" },
          { text: "性别", field: "GENDER" },
          { text: "数量", field: "COUNT" },
          { text: "金额", field: "AMOUNT" },
        ],
      },
      columns: [
        [
          { title: "姓名", align: "center", field: "NAME", width: 100 },
          { title: "性别", align: "center", field: "GENDER", width: 100 },
          { title: "数量", align: "center", field: "COUNT", width: 100 },
          { title: "金额", align: "center", field: "AMOUNT", width: 100 },
        ],
      ],
    },
  ])
// 打印数据
const data = ref({
  qrcodeVal:'3wda',
  name: "小花",
  logoTest: "https://portrait.gitee.com/uploads/avatars/user/1800/5400665_CcSimple_1591166830.png!avatar60",
  password: "12346",
  longText:
    "浙江在线3月29日讯最近，\n一篇小学五年级学生写的作文引起了钱报记者的关注这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文",
  table: [
    { id: "1", name: "王小可", gender: "男", count: "120", amount: "9089元" },
    { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
    { id: "3", name: "梦之遥", gender: "女", count: "720", amount: "29089元" },
    { id: "4", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
    { id: "5", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
    { id: "6", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
  ],
  myTable:[
    { id: "3", NAME: "梦之遥", GENDER: "女", COUNT: "720", AMOUNT: "29089元" },
    { id: "4", NAME: "黄小菊", GENDER: "女", COUNT: "420", AMOUNT: "19089元" },
  ]
})
const list = ref([])
// 获取已保存的模版数据
function init(){
  // eslint-disable-next-line no-undef
  $.ajax({
    type: 'post',
    url: 'http://127.0.0.1:3000/api/getModuleData',
    async: false,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (res) {
      list.value = res.data
    }
  })
}
// 保存当前模版
function saveModule(json){
  console.log(json);
  
   // eslint-disable-next-line no-undef
  //  $.ajax({
  //   type: 'post',
  //   url: 'http://127.0.0.1:3000/api/addModuleData',
  //   data: JSON.stringify(json),
  //   async: false,
  //   contentType: 'application/json; charset=utf-8',
  //   dataType: 'json',
  //   success: function () {
  //       alert("导出成功! 请查看控制台输出");
  //   }
  // })
}
init()
</script>

<style>

</style>